<!--
 * @Description: 项目标段
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:26
 * @LastEditTime: 2021-08-06 17:14:18
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\TAreaLinkage.vue
-->
<template>
  <span class="j-project-block">
    <a-select
      :disabled="disabled"
      show-search
      allowClear
      placeholder="请选择"
      :loading="project.loading"
      :filter-option="filterOption"
      v-model="project.pro_code"
      style="width:350px!important;"
      @change="handleProjectChange($event)"
    >
      <a-select-option
        :value="item.proCode"
        v-for="item in project.source"
        :key="item.uuid"
      >
        {{ item.proName }}
      </a-select-option>
    </a-select>
    <a-select
      show-search
      :disabled="disabled"
      allowClear
      placeholder="请选择"
      :filter-option="filterOption"
      :loading="block.loading"
      v-model="block.org_code"
      style="width:183px!important;"
    >
      <a-select-option
        :value="item.orgCode"
        v-for="item in block.source"
        :key="item.uuid"
      >
        {{ item.orgName }}
      </a-select-option>
    </a-select>
  </span>
</template>

<script>
export default {
  name: "projectBlock",
  model: { prop: "value", event: "change" },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [Object, String],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      //项目
      project: {
        source: [],
        pro_code: undefined,
        loading: false,
      },
      //标段
      block: {
        source: [],
        org_code: undefined,
        loading: false,
      },
    };
  },
  computed: {
    selectValue() {
      return {
        pro_code: this.project.pro_code,
        org_code: this.block.org_code,
      };
    },
  },
  watch: {
    selectValue: {
      handler(val) {
        this.$emit("change", val);
      },
    },
    value: {
      handler(val) {
        try {
          let { pro_code, org_code } = JSON.parse(val ?? "{}");
          this.project.pro_code = pro_code;
          if (pro_code) {
            this.getBlockList().then((res) => {
              this.block.org_code = org_code;
            });
          } else {
            this.block.source = [];
            this.block.org_code = undefined;
          }
        } catch (error) {}
      },
      immediate: true,
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.getProjectList();
    },

    //监听项目切换
    handleProjectChange(ev) {
      this.block.source = false;
      this.block.org_code = undefined;
      this.getBlockList();
    },

    //查询项目列表
    getProjectList() {
      return new Promise((resolve, reject) => {
        this.project.loading = true;
        this.$get("/mdata/sysProject/getProListByQX")
          .then((res) => {
            this.project.source = res.data ?? [];
          })
          .catch((_) => {
            this.project.source = [];
          })
          .finally((_) => {
            this.project.loading = false;
          });
      });
    },

    //查询标段列表
    getBlockList() {
      return new Promise((resolve, reject) => {
        this.block.loading = true;
        this.$get(
          `mdata/sysOrgExtend/getOrgExtendListByQX?tenantCode=${this.project.pro_code}`
        )
          .then((res) => {
            this.block.source = res.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.block.source = [];
          })
          .finally((_) => {
            this.block.loading = false;
          });
      });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.j-project-block {
  width: 100%;
  display: flex;
  .ant-select {
    // flex: 1;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // &:not(:last-child) {
    //   margin-bottom: 12px;
    // }
    &:not(:last-child) {
      margin-right: 14px;
    }
  }
}
</style>
